<template>
	<div >
		<el-dialog :title="state.title" v-model="state.isShowDialog" width="600px">
			<easy-form :fieldList="fieldList" :model="state.formData" ref="formRef" ></easy-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import { reactive, toRefs,ref} from 'vue'
	import { platformApi } from '/@/api/requests/platform'
	import { success,error } from '/@/utils/msg'
	import EasyForm from '/@/components/form/index.vue'



	const formRef = ref()
	// form 表单
	const state = reactive({
    formData:{
      id : 0,
      en_name : '',
      cn_name : '',
      field:'',
      iplist:'',
      remarks : ''
    },
    title:'新增',
    isShowDialog:false
	})



	const fieldList: Form.FieldItem[] = [
		{ label: '英文名称', field: 'en_name',placeholder:'请输入 英文名称' ,rules:[{ required: true, message: '请输入 英文名称' }]},
		{ label: '中文名称', field: 'cn_name',placeholder:'请输入 中文名称' ,rules:[{ required: true, message: '请输入 中文名称' }]},
    { label: '业务领域', field: 'field',placeholder:'请输入 业务领域'},
    { label: 'IP列表',type:'textarea', field: 'iplist',placeholder:'请输入 IP列表'},
		{ label: '备注',type:'textarea', field: 'remarks',placeholder:'请输入 备注' },
	] 
	
	// Options 配置项
	const options = reactive<Form.Options>({
		// showResetButton:false
	})



	// 打开弹窗
	const openDialog = ( row?, title?:string) => {
		state.formData = row
		state.isShowDialog = true
		state.title = title??'新增'
	}
	// 关闭弹窗
	const closeDialog = () => {
		state.isShowDialog = false;
	};

	// 取消
	const onCancel = () => {
		closeDialog()
	};

	// 
	const emit = defineEmits<{
		(e:"on-load"):void
	}>()

	// 新增
	const onSubmit = async() => {
		if (!formRef) return false
		formRef.value.validData().then(async(valid)=>{
      if ( valid ) {
        let {code,msg} = await platformApi().save( state.formData )
        if ( code === 0 || code === true ) {
          success(msg)
          onCancel()
          emit('on-load')
        }else {
          error(msg)
        }
      }
    })
	}

	
	defineExpose({
		openDialog,
		closeDialog,
		onCancel,
		onSubmit,
		fieldList,
		options,
		formRef
	})
</script>
